<template>
  <el-tab-pane label="场景" name="scene" class="scene-pane">
    <div class="panel">
      <Outliner />
      <Background></Background>
      <Environment></Environment>
    </div>

    <ActiveObjectTabs v-if="activeShallowRef"></ActiveObjectTabs>
  </el-tab-pane>
</template>
<script setup lang="ts">
import Outliner from './Outliner.vue'
import Background from './components/background.vue'
import Environment from './components/environment.vue'
import ActiveObjectTabs from './components/activeObjectTabs.vue'
import { useActiveObject } from '@renderer/stores/activeObject'
import { storeToRefs } from 'pinia'

const activeObjectStore = useActiveObject()
const { activeShallowRef } = storeToRefs(activeObjectStore)
</script>
<style lang="scss" scoped>
.scene-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.panel {
  padding: 10px;
}
::v-deep(.el-row) {
  margin-top: 10px;
  .el-row {
    margin-top: 0px;
  }
}
</style>
